
/*
* author kakay 
* data 2017.8.30
* name 待审列表
*/

import React, { Component } from 'react';
import { Flex, Tabs, WhiteSpace, Badge, ListView} from 'antd-mobile';
import './index.scss'
import {Resource} from '../../service/resource';
import BrowserUtils from '../../service/history';

class AuditList extends Component {
  constructor(props) {
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2
    });
    super(props);
    this.state = {
      logList: [],
      start: 0,
      open: false,
      serachFlag: false,
      num: 10,
      dataSource: dataSource.cloneWithRows([]),
      refreshing: false,
      height: document.documentElement.clientHeight,
      serach: {
        start: 0,
        num: 10
      }
    }
  }

  componentDidMount() {
    this.hasMore = true;
    this.manuallyRefresh = true;
    this.getLogList()
  }

  componentWillUnmount() {
    this.refs.lv.getInnerViewNode().removeEventListener('touchstart', this.ts);
    this.refs.lv.getInnerViewNode().removeEventListener('touchmove', this.tm);
  }
  onScroll = e => {
      this.st = e.scroller.getValues().top;
      this.domScroller = e;
  }

  getLogList() {
    const {start, num, dataSource} = this.state;
    Resource.getdata.get().then(res => {
      this.setState({
        logList: res,
        dataSource: dataSource.cloneWithRows(res),
        start: start,
        num: num
      })
    });
  }
  onRefresh = () => {
    const {start, num, dataSource, logList} = this.state;
    if (this.hasMore) {
      this.hasMore = false;
      Resource.getdata.get().then(res => {
        if (res.length !== num && res.length > 0) {
					this.setState({
						logList: [...logList, ...res],
						dataSource: dataSource.cloneWithRows([...logList, ...res]),
						refreshing: false,
						start: start,
						serachFlag: false
					});
				} else if (res.length === num) {
					this.setState({
						logList: [...logList, ...res],
						dataSource: dataSource.cloneWithRows([...logList, ...res]),
						refreshing: false,
						start: start + 10,
						serachFlag: false
					});
					this.hasMore = true;
				}
      });
    }
  }

  separator(sectionID, rowID) {
    return (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 5,
          borderTop: '1px solid #ECECED',
          borderBottom: '1px solid #ECECED'
        }}
      />
    )
  }


  detailLog(id) {
     BrowserUtils.push({pathname: '/messageList', state: {data: id}});
  }
  render() {
    const TabPane = Tabs.TabPane;
    const row = (rowData, sectionID, rowID) => {
      const date = rowData.date && (rowData.date.split('-')[1] + '-' + rowData.date.split('-')[2]);
      return (
         <Flex key={rowID} justify="between" className="lv-item" onTouchTap = {() => this.detailLog(rowData.id)}>
          <Flex.Item className="label">{rowData.projectName}</Flex.Item>
          <Flex.Item className="label">{rowData.nickName}</Flex.Item>
          <Flex.Item className="label">{rowData.workingHour}</Flex.Item>
          <Flex.Item className="label">{date}</Flex.Item>
        </Flex>
      );
    }
    return (
         <div className="auditlist">
            <Tabs defaultActiveKey="1" className="tabFixed"	>
              <TabPane tab={<Badge text={3}>待我审批</Badge>} key="1">
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                <Flex className="content" direction="column" align="center">
                  <ListView
                    ref="lv"
                    className="list-view"
                    dataSource={this.state.dataSource}
                    renderRow={row}
                    renderSeparator={this.separator}
                    initialListSize={10}
                    pageSize={10}
                    scrollRenderAheadDistance={200}
                    renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                      {this.state.refreshing ? 'Loading...' : 'Loaded'}
                    </div>)}
                    scrollEventThrottle={20}
                    style={{
                      height: this.state.height,
                      border: '1px solid #ddd'
                    }}
                    scrollerOptions={{ scrollbars: true }}
                    onEndReached={!this.state.serachFlag ? this.onRefresh : () => {}}
                  />
                </Flex>
                </div>
              </TabPane>
              <TabPane tab={<Badge text={'今日(20)'}>待我阅读</Badge>} key="2">
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
                待我阅读
                </div>
              </TabPane>
              <TabPane tab={<Badge dot>短消息</Badge>} key="3">
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
                短消息
                </div>
              </TabPane>
            </Tabs>
            <WhiteSpace/>
      </div>
    );
  }
}

export default AuditList;
